<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="退料单编号">
                <el-input v-model=" strippingNo" placeholder="请输入退料单编号"></el-input>
            </el-form-item>
            
            <el-form-item label="生产工单">
                <el-input v-model=" productionOrderNo" placeholder="请输入生产工单编号"></el-input>
            </el-form-item>
            
         
            
            <el-form-item label="仓库名称">
                <el-input v-model="warehouseName" placeholder="请输入仓库名称"></el-input>
            </el-form-item>
            
            <el-button type="primary" @click="search" style="margin-bottom: 20px;">
                <el-icon style="margin-right: 10px;"><Search /></el-icon>搜索
            </el-button>
        </el-form>
        
        <el-button type="primary" v-perm:management:salesorder:insert="insert">添加</el-button>
        <el-button type="primary" v-perm:management:salesorder:update="update">修改</el-button>
        <el-button type="primary" v-perm:management:salesorder:remove="remove">删除</el-button>
        <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
         
            <el-table-column prop="strippingNo" label="退料单编号" width="150"></el-table-column>
         
            <el-table-column prop="strippingName" label="退料单名称" width="150"></el-table-column>

            <el-table-column prop="productionOrderNo" label="生产工单编号" width="150"></el-table-column>
    
            <el-table-column prop="warehouseName" label="仓库名称" width="150"></el-table-column>
            
              <el-table-column prop="areaName" label="库区名称" width="150"></el-table-column>
             
              <el-table-column prop="locationName" label="库位名称" width="150"></el-table-column>
            
            <el-table-column prop="strippingDate" label="退料日期" width="150"></el-table-column>
            
            
            <el-table-column prop="status" label="单据状态" width="150"></el-table-column>
          
            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary" v-perm:management:salesorder:update="update">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row" v-perm:management:salesorder:remove="remove" @click="deleteSingle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" style="width: 1250px;">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'

let data = ref({})
let visible = ref(false)
let title = ref('')

const insert = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

const update = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

// 初始化状态（设置默认值）
const strippingNo= ref('')
const productionOrderNo= ref('')
const warehouseName= ref('')
// 示例订单数据
let salesorder = ref([
    {
        strippingNo: 'S0001',
        strippingName: '退料单1',
        productionOrderNo: 'P0001',
        warehouseName: '仓库1',
        areaName: '库区1',
        locationName: '库位1',
        strippingDate: '2022-01-01',
        status: '已完成'
    },
    {
        strippingNo: 'S0002',
        strippingName: '退料单2',
        productionOrderNo: 'P0002',
        warehouseName: '仓库2',
        areaName: '库区2',
        locationName: '库位2',
        strippingDate: '2022-01-02',
        status: '已完成'
    },
    {
        strippingNo: 'S0003',
        strippingName: '退料单3',
        productionOrderNo: 'P0003',
        warehouseName: '仓库3',
        areaName: '库区3',
        locationName: '库位3',
        strippingDate: '2022-01-03',
        status: '已完成'
    }
]);

let selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};

const bulkDelete = () => {
    if (confirm("确定要删除选中的订单吗？")) {
        salesorder.value = salesorder.value.filter(order => !selectedRows.value.includes(order));
        selectedRows.value = []; // 清空选中项
    }
};

// 单行删除方法
const deleteSingle = (row) => {
    if (confirm("确定要删除该订单吗？")) {
        salesorder.value = salesorder.value.filter(order => order.orderNo !== row.orderNo);
    }
};
</script>

<style  scoped>
.el-select {
    width: 150px;
}
</style>
